<template>
    <el-card shadow="hover">
        <h1 class="status-code">
            404
        </h1>
        <template #footer>
            <el-space direction="vertical" size="large">
                <h3>资源不存在</h3>
                <el-button @click="$router.replace({ name: 'home' })" :icon="HomeFilled" round type="primary"
                    plain>返回首页</el-button>
            </el-space>
        </template>
    </el-card>
</template>

<script setup>
import { HomeFilled } from '@element-plus/icons-vue'
</script>

<style scoped>
.el-card {
    text-align: center;

}

.status-code {
    color: #007BFF;
    font-size: 200px;
    text-shadow: 10px 0 10px rgba(0, 0, 0, .5);
}
</style>